import React, { useEffect, useState } from "react";
import { Button, NavBar, Input } from "antd-mobile";
import styles from "./Index.module.css";
import { useNavigate } from "react-router-dom";
import instance from "../../api/request";
function Index() {
  const nav = useNavigate();
  const [nickName, setNickName] = useState("");

  const xiug = () => {
    instance
      .put("/api/user/verify/v1/modifyNickName", null, {
        params: {
          nickName: nickName,
        },
      })
      .then((res) => {
        console.log(res, "===修改昵称");
        localStorage.setItem('nickName',nickName)
        nav(-1)
      });
  };

  return (
    <div className={styles.setnamez}>
      <div className={styles.nav}>
        <div>
          <NavBar onBack={() => nav(-1)}>
            <span style={{ marginLeft: "40px" }}>设置昵称</span>
          </NavBar>
        </div>
        <div>
          <Button size="mini" color="primary" style={{ marginTop: "10px" }} onClick={xiug}>
            完成
          </Button>
        </div>
      </div>

      <div className={styles.shu}>
        <Input
          value={nickName}
          onChange={(val) => setNickName(val)}
          placeholder="请输入昵称"
        />
      </div>
    </div>
  );
}

export default Index;
